<template>
    <div class="box">
       <div class="detail-before img-list">
            <img src="https://ss.lanqb.com/5e8cd74a-976b-4581-b0b7-10a59c2fc16b" class="detail-img">
            <img src="https://ss.lanqb.com/e56097ba-c457-4e83-8990-5e448837b85e" class="detail-img">
            <img src="https://ss.lanqb.com/c04d6cf0-0487-4c25-ad13-8b81194a2055" class="detail-img">
            <img src="https://ss.lanqb.com/0bcbae06-7adc-49b6-970c-5b0e01eaee04" class="detail-img">
            <img src="https://ss.lanqb.com/d775f322-c58c-4a3c-aa5d-5ba22d0250bb" class="detail-img">
            <img src="https://ss.lanqb.com/c246e178-6918-42f7-9e03-2ccef025a71e" class="detail-img">
        </div>

        <div class="detail-center">
          <motai :width="'21.92708333%'" :height="'50%'" :top="0" :left="0" :src="'https://ss.lanqb.com/32fc8ab5-9e7a-46ad-8ffb-43d393c8de9a.jpg'"> </motai>
          <motai :width="'21.92708333%'" :height="'50%'" :top="'50%'" :left="0" :src="'https://ss.lanqb.com/10da1873-178e-4b65-8b94-b4521b7d2b65.jpg'"> </motai>
          <motai :width="'21.92708333%'" :height="'33.33333333%'" :top="0" :left="'21.92708333%'" :src="'https://ss.lanqb.com/90a75768-ba4b-4a6c-8688-c74309656eb2.jpg'"> </motai>
          <motai :width="'21.92708333%'" :height="'33.33333333%'" :top="0" :left="'43.85416667%'" :src="'https://ss.lanqb.com/6d446fee-d5d7-4605-bc51-76f54816d7d6.jpg'"> </motai>
          <motai :width="'34.21875%'" :height="'33.33333333%'" :top="0" :left="'65.78125%'" :src="'https://ss.lanqb.com/ed9e7e6a-1f07-4be6-9581-71c64b22b882.jpg'"> </motai>
          <motai :width="'34.21875%'" :height="'33.33333333%'" :top="'33.33333333%'" :left="'21.92708333%'" :src="'https://ss.lanqb.com/7eb91351-9475-4983-ac5c-b33231db08b3.jpg'"> </motai>
          <motai :width="'21.92708333%'" :height="'33.33333333%'" :top="'33.33333333%'" :left="'56.14583333%'" :src="'https://ss.lanqb.com/06c000ff-3e92-4972-8278-69eaa7337e48.jpg'"> </motai>
          <motai :width="'21.92708333%'" :height="'33.33333333%'" :top="'33.33333333%'" :left="'78.07291667%'" :src="'https://ss.lanqb.com/3fa1edd2-368f-41af-8951-b39636ca545f.jpg'"> </motai>

          <motai :width="'21.92708333%'" :height="'33.33333333%'" :top="'66.66666667%'" :left="'21.92708333%'" :src="'https://ss.lanqb.com/7c9147a8-c741-47c8-b391-ae0f222a5ef5.png'"> </motai>
          <motai :width="'21.92708333%'" :height="'33.33333333%'" :top="'66.66666667%'" :left="'43.85416667%'" :src="'https://ss.lanqb.com/9dbc5942-cb73-4ad8-8c30-096a8cabac49.png'"> </motai>
          <motai :width="'34.21875%'" :height="'33.33333333%'" :top="'66.66666667%'" :left="'65.78125%'" :src="'https://ss.lanqb.com/e4b3270e-5d9f-46c6-8218-626b1d5f7420.jpg'"> </motai>
        </div>
        <div class="detail-after img-list">
             <img src="https://ss.lanqb.com/cad0102a-4de5-4610-b2f1-bdb96c926b40" class="detail-img">
            <img src="https://ss.lanqb.com/c5a5787e-aafb-43a3-8a01-1d186a6784a7" class="detail-img">
            <img src="https://ss.lanqb.com/873d54c2-56d7-4224-8c9f-df462acd6919" class="detail-img">
            <img src="https://ss.lanqb.com/ebbc4754-97d2-42a8-9f2c-db9418b39f79" class="detail-img">
            <img src="https://ss.lanqb.com/04252574-6417-470e-8c95-da5f8f7a2ac1" class="detail-img">
            <img src="https://ss.lanqb.com/f2faed82-7e4d-4f8b-888b-75bed99c5d20" class="detail-img">
            <img src="https://ss.lanqb.com/24ed1b3a-47ac-495b-895a-573d5d957ba6" class="detail-img">
            <img src="https://ss.lanqb.com/c1fde524-abbe-4ed4-8648-1ac939fcfe40" class="detail-img">
        </div>
      
    </div>
</template>
<script>
import motai from '@/views/courseDetail/components/motai.vue'
export default {
  components: { motai },

}
</script>
<style lang="scss" scoped>
.box {
  max-width: 1920px;
  margin-right: auto;
  margin-left: auto;
}
.img-list{
  .detail-img {
    display: block;
    width: 100%;
  }
}
.detail-center{
  position: relative;
    width: 100%;
    height: 1002px;
    // width: 1002px;
    margin-right: auto;
    margin-left: auto;
}
</style>